<template>
  <div class="app">
    <div class="main">
      <div class="header">
        <i @click="fh" class="iconfont icon-xiangzuo xz"></i>
        <div class="more">···</div>
      </div>
      <div class="info">
        <p>已取消</p>
        <span>订单因超时自动关闭，优惠券将自动返回</span>
      </div>
      <div class="address w">
        <i class="iconfont icon-ditu-dibiao"></i>
        <div class="address-main">
          <p>山西省太原市迎泽区郝装镇XXX155xxx</p>
          <p class="maddress">山西省山西省太原市迎泽区郝庄正街xxxxxxxxxxxxxx</p>
          <p>xxx 155xxxx8673</p>
        </div>
      </div>
      <div class="shop-info">
        <div class="shop-title">
          <div>
            <p><img src="" alt="" /></p>
            <span>xxx的店</span>
          </div>
          <img src="" alt="" />
        </div>
        <div class="shop-show">
          <div class="shop-show-x">
            <p class="shop-name">
              <span> xxxxxxxxxxxxx </span>
              <span> ${{ price }} </span>
            </p>
            <p class="shop-size">
              <span> 棕绿 · 43(男码) </span>
              <span>x{{ quantity }}</span>
            </p>
            <div class="list">
              <div>退货包运费险</div>
              <div>7天无理由退货</div>
              <div>晚发必赔</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dtf_serve">
      <p>我的服务</p>
      <div>
        <p class="p123">发票信息<img src="../../assets/point.png" alt="" /></p>
        <p class="p234">不支持自助开票，请联系客服</p>
      </div>
    </div>
    <div class="order_information">
      <div>订单信息</div>
      <div id="order_information1">
        <p>订单信息</p>
        <div class="order_number">
          <div>P683360274067213051</div>
          <span class="bar"> | </span>
          <div class="copy">复制</div>
        </div>
      </div>
      <div>
        <p>下单时间</p>
        <p>2023-5-6 16:04:34</p>
      </div>
    </div>
    <div class="dtf_assist">
      <div class="dtf_aff">帮助中心</div>
      <div class="dtf_affiliation">
        <div><img src="../../assets/bluekf.png" alt="" />&nbsp;联系卖家</div>
        <div><img src="../../assets/bluedang.png" alt="" />&nbsp;投诉卖家</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: "23",
      quantity: "2",
    };
  },
  methods: {
    fh() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.app {
  width: 100vw;
  height: 100vh;
  background: #f6f6f6;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

body {
  background-color: rgb(247, 247, 247);
  height: 1000px;
}

.main {
  width: 95%;
  margin: 10px auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.xz,
.more {
  font-size: 20px;
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 60px;
}

.info p {
  margin-top: 5px;
  font-size: 22px;
  font-weight: 500;
}

.info span {
  color: rgb(144, 138, 138);
}

.w {
  /* background-color: aliceblue; */
  border-radius: 20px;
}

.address {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 90px;
}

.address .icon-ditu-dibiao {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: aliceblue;
  background-color: black;
  border-radius: 20px;
}

.address-main {
  width: 280px;
  font-size: 15px;
}

.address-main {
  white-space: nowrap;
}

.maddress {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-title {
  width: 100px;
  height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.shop-title > p {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
}
.shop-title div {
  height: 20px;
  width: 130px;
  display: flex;
  justify-content: center;
}
.shop-title div p img {
  width: 20px;
  height: 20px;
}

.shop-show {
  height: 130px;
  width: 250px;
  /* background-color: rgb(255, 255, 255); */
}

.p1 {
  width: 80px;
  height: 80px;
  border-radius: 10px;
}

.shop-title img {
  width: 80px;
  height: 80px;
  border-radius: 15px;
}
.list {
  width: 239px;
  height: 30px;
  margin-top: 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list div {
  /* width: 85px;
    height: 20px; */
  padding: 2px 5px;
  font-size: 10px;
  text-align: center;
  line-height: 15px;
  border: 1px solid rgb(95, 95, 95);
  border-radius: 10px;
}
.shop-size {
  font-size: 13px;
  color: rgb(88, 88, 88);
  margin-top: 7px;
}
.shop-show-x {
  width: 230px;
  height: 130px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.shop-info {
  height: 140px;
  width: 370px;
  border-radius: 15px;
  background-color: rgb(255, 255, 255);
  display: flex;
  margin: 0 auto;
  margin-bottom: 20px;
}
.dtf_serve p {
  font-size: 14px;
  margin-left: 15px;
}
.dtf_serve div p img {
  width: 20px;
  height: 20px;
}
.dtf_serve div:nth-child(2) {
  width: 340px;
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.p123 {
  display: block;
  width: 130px;
  height: 19px;
  color: rgb(112, 112, 112);
  display: flex;
  align-items: center;
}
.p234 {
  display: block;
  width: 220px;
  height: 19px;
  font-size: 16px;
  color: rgb(112, 112, 112);
  display: flex;
  align-items: center;
}
.dtf_serve {
  width: 370px;
  height: 80px;
  background-color: white;
  border-radius: 15px;
  margin: 0 auto;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.order_information {
  width: 370px;
  height: 100px;
  border-radius: 15px;
  margin: 0 auto;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.order_number {
  width: 200px;
  height: 30px;
  font-size: 14px;
  color: #707070;
  display: flex;
  line-height: 30px;
}

#order_information1 {
  width: 330px;
  height: 30px;
  color: #707070;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.copy {
  width: 80px;
  height: 20px;
  color: rgb(66, 166, 237) !important;
  display: flex;
  justify-content: center;
}
.order_information div:nth-child(3) {
  color: #707070;
  width: 330px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.order_information div:nth-child(1) {
  width: 330px;
}

.dtf_assist {
  width: 370px;
  height: 85px;
  border-radius: 15px;
  margin: 0 auto;
  margin-top: 20px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.dtf_assist img {
  width: 25px;
  height: 25px;
}
.dtf_affiliation {
  width: 300px;
  height: 35px;
  display: flex;
}
.dtf_affiliation div {
  width: 150px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dtf_aff {
  width: 330px;
}
.dtf_affiliation div:nth-child(1) {
  border-right: 1px solid;
}
.shop-name {
  display: flex;
  justify-content: space-between;
}
.shop-size {
  display: flex;
  justify-content: space-between;
}
.bar {
  margin: 0 5px;
  color: #d1d1d1;
}
</style>